<template>
  <div class="app-container">
    <el-card>
      <div class="search-container" v-if="awaitQueueUserList.length > 0">
        <el-scrollbar max-height="500px">
          <div class="box">
            <div class="item" v-for="item in awaitQueueUserList" :key="item.id">
              <el-collapse>
                <el-collapse-item :title="item.userName" :name="item.id">
                  <div class="tag">
                    <el-tag v-if="item.queuing" type="error">有排队项目</el-tag>
                    <el-tag v-if="!item.queuing">暂无排队项目</el-tag>
                  </div>
                  <el-row
                    style="padding: 6px 0"
                    v-for="pro in item.awaitingProjects"
                    :key="pro.id"
                  >
                    <el-col :span="12">{{ pro.name }} </el-col>
                    <el-col :span="12"
                      ><el-button
                        size="small"
                        @click="queueDialog(item.userId, pro.id, item.queuing)"
                        >排队</el-button
                      >
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <el-empty image-size="50" v-else description="暂无用户参与体检项目" />
    </el-card>

    <el-dialog style="width: 60%; min-height: 30vh" v-model="dialogVisible">
      <div>
        <el-table size="large" stripe border :data="deptList">
          <el-table-column property="id" label="ID" />
          <el-table-column property="name" label="科室名称" />
          <el-table-column label="排队人数">
            <template #default="scope"
              ><span>{{ scope.row.userList.length }}</span></template
            >
          </el-table-column>
          <el-table-column label="排队时间">
            <template #default="scope"
              ><span>{{
                (scope.row.userList.length * duration) / 60
              }}</span></template
            >
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="left" width="200">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="确认"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确认在该科室下排队吗？"
                @confirm="queue(scope.row.id)"
              >
                <template #reference>
                  <el-button size="small">排队 </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { awaitQueueUserListAPI } from "@/api/queue/index";
import { IAwaitQueueDetailVo } from "@/api/queue/types";
import { ICheckDept, ICheckProject } from "@/api/queue/types";

import { PropType } from "vue";
import { queueProject } from "@/api/queue";
import { InfoFilled } from "@element-plus/icons-vue";
import { QueryUserProject } from "@/api/queue";
import { use } from "echarts";

const uncheckList = ref<ICheckProject[]>([]);

const getUncheckList = async () => {
  const { data } = await QueryUserProject();
  uncheckList.value = data;
};

const dialogVisible = ref(false);
const projectId = ref<number>();
const duration = ref<number>();
const awaitQueueUserList = ref<IAwaitQueueDetailVo[]>([]);

const getQueueList = async () => {
  const { data } = await awaitQueueUserListAPI();
  awaitQueueUserList.value = data;
};

const deptList = ref<ICheckDept[]>([]);
const userID = ref<number>();

const queueDialog = (userId?: number, proId?: number, queuing?: boolean) => {
  if (queuing) {
    ElNotification({
      title: "提示",
      message: "该用户还有排队项目未检完，请稍等安排",
    });
    return;
  }
  userID.value = userId;
  QueryUserProject(userId).then((res) => {
    uncheckList.value = res.data;
    const project = uncheckList.value.find((item) => item.id === proId);
    if (!project) return;
    deptList.value = project.deptList;
    init(project.id, project.duration);
  });
};

const init = (project?: number, time?: number) => {
  projectId.value = project;
  duration.value = time;
  dialogVisible.value = true;
};

const queue = (deptId: number) => {
  queueProject(deptId, userID.value).then((res) => {
    if (res.data) {
      dialogVisible.value = false;
      userID.value = undefined;
      getQueueList();
    } else {
      ElNotification({
        title: "提示",
        message: h("i", { style: "color: teal" }, "出现错误!"),
      });
    }
  });
};

onMounted(() => {
  getQueueList();
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    margin-left: 15px;
    border: 1px solid #ccc;
    width: 20%;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;

    .tag {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .left {
        width: 50%;
      }
      .right {
        width: 50%;
      }
    }
  }
}

.search-container {
  margin-bottom: 20px;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
